<style type="text/css" media="all">
    .mast{
        color: red;
        font-weight: bold;
        margin-right: 4px;
    }
    .mast::after{
        content: '*';
    }
    .completion_value_item{
        display: flex;align-items: center;margin-top: 10px;
    }
    .completion_values{
        margin: 10px 0;
    }
    .completion_remove{
        margin-left: 10px;
    }
    .completion_options{
    }
    .option_item{
        border: 1px solid #1688f1;padding: 20px;border-radius: 2px;margin-top: 10px;
    }
    .completion_box{
        display: none;
    }
    .test_id_box{
        /*  {if condition="input('test_id')"}  */
        display: none;
        /*  {else /}  */
        display: block;
        /*  {/if}  */
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group test_id_box">
        <label class="control-label col-xs-12 col-sm-2"><span class="mast"></span>{:__('Test_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-test_id" data-rule="required" min="0" data-source="classroom/test/index" data-field="title" class="form-control selectpage" name="row[test_id]" type="text" value="{:input('test_id')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="typeList" item="vo"}
                <label for="row[type]-{$key}"><input id="row[type]-{$key}" name="row[type]" type="radio" value="{$key}" {in name="key" value="1"}checked{/in} /> {$vo}</label>
                {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span class="mast"></span>{:__('Score')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-score" data-rule="required" min="0" class="form-control" name="row[score]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span class="mast"></span>{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <button type="button" class="btn btn-success btn-completion completion_box" style="margin-bottom: 10px;"><i class="fa fa-plus"></i> 新增填空</button>
            <textarea id="c-title" data-rule="required" class="form-control " rows="5" name="row[title]" cols="50" placeholder=""></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span class="mast"></span>{:__('Option_json')}:</label>
        <div class="col-xs-12 col-sm-8">

            <!-- 单选答案 start -->
            <div class="radio_box" style="display:block;">
                <dl class="fieldlist" data-name="row[radio_json]" data-template="radio_json_tpl">
                    <dd>
                        <ins>选项</ins>
                        <ins>选择正确答案</ins>
                    </dd>
                    <dd>
                        <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
                    </dd>
                    <textarea name="row[radio_json]" class="form-control hide" cols="30" rows="5">[{"option":""},{"option":""},{"option":""}]</textarea>
                </dl>
                <!--定义模板，模板语法使用Art-Template模板语法-->
                <script type="text/html" id="radio_json_tpl">
                    <dd class="form-inline">
                        <!--<input style="width: 200px;" type="text" name="radio_json[<%=index%>][option]" class="form-control" value="<%=row['option']%>">-->
                        <textarea style="width: 200px;" name="radio_json[<%=index%>][option]" class="form-control " rows="1"><%=row['option']%></textarea>
                        <label for="radio_json-<%=index%>" style="margin-right: 40px;" data-value="<%=row['answer_checked']%>">
                            <input style="width: 20px;" type="radio" id="radio_json-<%=index%>" <%=row['answer_checked']==1?'checked':''%> class="answer_radio" name="option_json[<%=index%>][answer_checked]" value="1">
                            <span class="btn btn-xs btn-info "><i class="fa fa-hand-o-left"></i> 选择</span>
                        </label>
                        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                    </dd>
                </script>
            </div>
            <!-- 单选答案 end -->
            <!-- 多选答案 start -->
            <div class="multiple_box" style="display:none;">
                <dl class="fieldlist" data-name="row[multiple_json]" data-template="multiple_json_tpl">
                    <dd>
                        <ins>选项</ins>
                        <ins>选择正确答案</ins>
                    </dd>
                    <dd>
                        <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
                    </dd>
                    <textarea name="row[multiple_json]" class="form-control hide" cols="30" rows="5">[{"option":""},{"option":""},{"option":""}]</textarea>
                </dl>
                <!--定义模板，模板语法使用Art-Template模板语法-->
                <script type="text/html" id="multiple_json_tpl">
                    <dd class="form-inline">
                        <!--<input style="width: 200px;" type="text" name="multiple_json[<%=index%>][option]" class="form-control" value="<%=row['option']%>">-->
                        <textarea style="width: 200px;" name="multiple_json[<%=index%>][option]" class="form-control " rows="1"><%=row['option']%></textarea>
                        <label for="multiple_json-<%=index%>" style="margin-right: 40px;margin-left: 4px;" data-value="<%=row['answer_checked']%>">
                            <input style="width: 18px;margin-right: 4px;" id="multiple_json-<%=index%>" name="multiple_json[<%=index%>][answer_checked]"  type="checkbox" value="1" />
                            <span class="btn btn-xs btn-info "><i class="fa fa-hand-o-left"></i> 选择</span>
                        </label>
                        <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                    </dd>
                </script>
            </div>
            <!-- 多选答案 end -->
            <!-- 判断题 start -->
            <div class="true_box" style="display:none;">
                <div class="radio">
                    <label for="row[true_json]-1"><input id="row[true_json]-1" name="row[true_json]" type="radio" value="正确" /> 正确</label>
                    <label for="row[true_json]-0"><input id="row[true_json]-0" name="row[true_json]" type="radio" value="错误" /> 错误</label>
                </div>
            </div>
            <!-- 判断题 end -->
            <!-- 填空题 start -->
            <div class="completion_box">
                <div class="tips" style="color: #FFF;background: #f75444;padding: 4px 10px;border-radius: 2px;">
                    <b>tips：<i class="fa fa-volume-up"></i></b><br>
                    <b>1：</b>对应填空的标准答案，用于改卷和自动匹配答案，可以设置多个答案，自动改卷时其中一个答案匹配就算正确。<br>
                    <b>2：</b>答案是根据【占位关键字：(________)】来出现的。
                </div>
                <div class="completion_options"></div>
            </div>
            <!-- 填空题 end -->
            <!-- 问答题 start -->
            <div class="ask_box" style="display:none;">
                <div class="tips" style="color: #FFF;background: #f75444;padding: 4px 10px;border-radius: 2px;">
                    <b>tips：<i class="fa fa-volume-up"></i></b><br>
                    <b>1：</b>问答题不进行自动批卷，下面内容作为阅卷人的参考。
                </div>
                <div class="ask_options" style="margin-top: 10px;">
                    <textarea id="c-ask_json" data-rule="" class="form-control " rows="5" name="row[ask_json]" cols="50"></textarea>
                </div>
            </div>
            <!-- 问答题 end -->

        </div>
    </div>


    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>